<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .search-info-style {
    margin: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .title {
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
  }
  .notice-name {
    line-height: 2.5;
    margin-top: 6%;
  }
  .notice-context {
    text-indent: 2em;
    line-height: 2.5;
  }
  .notice-content1 {
    padding: 0 4% 0 12%;
    position:relative;
  }
  .notice-address {
    text-align: right;
    margin-top: 10%;
  }
  .notice-address1 {
    text-align: right;
    margin-top: 10px;
  }
  .notice-date {
    text-align: right;
  }
  .text-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    text-align: center;
  }
  .text-line-date {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 10%;
    text-align: center;
  }
  .text-line-address {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 15%;
    text-align: center;
  }
  .print-btn {
    padding: 15px;
    float: right;
  }
  .code-img2 {
    height: 120px;
    width: 120px;
    top: 70%;
    left: 4%;
    position: absolute;
  }
  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }
  .centerimg {
    text-align: center;
  }
  .pre_img_style {
    height:500px;
    width:auto;
    max-width: 500px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>

<template>
  <div>
      <Row class="search-info-style">
        <Col span="2" align="center" style="line-height: 2;width: 80%">领证人姓名：</Col>
        <Col span="4">
          <Input v-model="searchInfo.name" style="width: 80%" placeholder="请输入领证人姓名"></Input>
        </Col>
        <Col span="2" align="center" style="line-height: 2;">身份证号码：</Col>
        <Col span="4">
          <Input v-model="searchInfo.card_no" style="width: 80%" placeholder="请输入身份证号码"></Input>
        </Col>
        <Col span="2" align="center" style="line-height: 2;">证件名称：</Col>
        <Col span="4">
          <Input v-model="searchInfo.documents" style="width: 80%" placeholder="请输入证件名称"></Input>
        </Col>
        <Button class="new-btn-sty" type="primary" icon="ios-search" @click="searchData()">搜索</Button>
        <Button class="new-btn-sty" type="primary" icon="ios-add" @click="addShow" style="margin-left:2px">添加</Button>
      </Row>
    <Row class="search-info-style">
      <Col span="2" align="center" style="line-height: 2;">领取方式：</Col>
      <Col span="4">
        <Select v-model="searchInfo.way" style="width: 80%">
          <Option value="">全部</Option>
          <Option value="1">邮寄</Option>
          <Option value="2">领用</Option>
        </Select>
      </Col>
    </Row>
    <Card style="margin-top: 2%">
      <Table border :columns="columns1" :data="data1">
        <template slot-scope="{ row, index, column }" slot="action">
          <Button type="info" size="small"  @click="updateShow(index)" style="margin-right:5px">编辑</Button>
          <Button type="error" size="small" @click="deleteData(index)">删除</Button>
        </template>
      </Table>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
      <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
            :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    </Card>
    <Modal v-model="modal.show" :title="modal.title" width="430">
      <Form :model="formData" :label-width="100" :rules="ruleValidate" ref="formData" v-if="modal.show">
        <FormItem label="领证人姓名" prop="name">
          <Input v-model="formData.name"></Input>
        </FormItem>
        <FormItem label="身份证号码" prop="card_no">
          <Input v-model="formData.card_no"></Input>
        </FormItem>
        <FormItem label="证件名称" prop="documents">
          <Input v-model="formData.documents"></Input>
        </FormItem>
        <FormItem label="领取方式" prop="way">
          <RadioGroup v-model="formData.way" type="button">
            <Radio label="1">邮寄</Radio>
            <Radio label="2">领用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="快递单号" prop="EMS_code">
          <Input v-model="formData.EMS_code" :disabled="formData.way=='2'"></Input>
        </FormItem>
        <FormItem label="快递地址" prop="EMS_address">
          <Input type='textarea' :rows="3" :autosize="{maxRows:3,minRows: 3}" v-model="formData.EMS_address" :disabled="formData.way=='2'"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addData('formData')">保存</Button>
        <Button v-if="modal.type === '2'" type="primary" @click="updateData('formData')">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getPageList, addData, updateData, deleteData, DateFormat, lenValid, IdentityCodeValid } from '@/api/identity_informaiton'

export default {
  data () {
    return {
      modal: {
        show: false,
        title: '',
        type: ''
      },
        loadData: false,
        ruleValidate: {
            name: [
                { required: true, message: '领证人姓名信息必填', trigger: 'blur' },
                { validator: (rule, value, cb) => { lenValid(value, 20, cb) }, trigger: 'blur' }
            ],
            card_no: [
                { required: true, message: '身份证号码信息必填', trigger: 'blur' },
                { validator: (rule, value, cb) => { IdentityCodeValid(value, value, cb) }, trigger: 'blur' }
            ],
            documents: [
                { required: true, message: '证件名称信息必填', trigger: 'blur' },
                { validator: (rule, value, cb) => { lenValid(value, 20, cb) }, trigger: 'blur' }
            ],
            way: [
                { required: true, message: '领取方式信息必须选择', trigger: 'blur' }
            ],
            EMS_code: [
                { required: false, message: '快递单号信息必填', trigger: 'blur' },
                { validator: (rule, value, cb) => { lenValid(value, 20, cb) }, trigger: 'blur' }
            ],
            EMS_address: [
                { required: false, message: '快递地址信息必填', trigger: 'blur' },
                { validator: (rule, value, cb) => { lenValid(value, 100, cb) }, trigger: 'blur' }
            ]
        },
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          title: '领证人姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号码',
          key: 'card_no',
          align: 'center',
            render: (h, params) => {
                var cardno = params.row.card_no
                if (cardno) {
                    if (cardno.length == 18) {
                        cardno = cardno.substring(0, 6) + '********' + cardno.substring(14)
                    }
                }
                return h('div', cardno)
            }
        },
        {
            title: '领用时间',
            key: 'pick_up_time',
            align: 'center',
            render: (h, params) => {
                let value = params.row.pick_up_time
                if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                    value = '--'
                } else {
                    value = DateFormat(value, 'YYYY-MM-DD HH:mm:ss')
                }
                return h('span', value + ' ')
            }
        },
        {
          title: '领取方式',
            key: 'way',
          align: 'center',
            render: (h, params) => {
                return h('span', params.row.way === '1' ? '邮寄' : '领用')
            }
        },
          {
              title: '快递单号',
              key: 'EMS_code',
              align: 'center'
          },
          {
              title: '快递地址',
              key: 'EMS_address',
              align: 'center'
          },
          {
              title: '操作',
              slot: 'action'
          }
      ],
      data1: [],
      formData: {
      },
        param: {},
        searchInfo: {
            name: '',
            card_no: '',
            documents: '',
            way: '',
            totalnum: 0,
            currentPageNo: 1,
            currentPageSize: 10
        }
    }
  },
  computed: {},
  methods: {
      searchData () {
          this.param.name = this.searchInfo.name
          this.param.card_no = this.searchInfo.card_no
          this.param.documents = this.searchInfo.documents
          this.param.way = this.searchInfo.way
          this.initList(this.param)
      },
    initList (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      getPageList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data1 = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取领证登记信息列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    size (pageSize) {
        this.searchInfo.currentPageSize = pageSize
        this.changePageNo()
    },
    changePageNo (pageNo) {
        console.log(pageNo)
        this.searchInfo.currentPageNo = pageNo
        this.initList(this.param)
    },
    addShow () {
      let that = this;
      that.formData = {}
      that.modal.title = '登记信息'
      that.modal.type = '1'
      that.modal.show = true
    },
    updateShow (index) {
        let that = this;
        let record = that.data1[index]
        let param = {};
        param.id = record.id;
        getPageList(param).then(res => {
            if (res.data.errcode === 0) {
                that.formData = res.data.data.results[0];
            }
        })
        this.modal.title = '编辑信息'
        this.modal.type = '2'
        this.modal.show = true
    },
    addData (name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
                addData(this.formData).then(res => {
                    console.log(res.data.data)
                    if (res.data.errcode === 0) {
                        this.$Message.success('添加信息成功')
                        this.formData = {}
                        this.modal.show = false
                        this.initList(this.param);
                    } else {
                        this.$Notice.error({
                            title: '添加信息失败',
                            desc: res.data.errmsg
                        })
                    }
                })
            } else {
                this.$Notice.error({ title: '必填信息未填写完成!', desc: '必填信息未填写完成!' })
            }
        });
    },
    updateData (name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
                updateData(this.formData).then(res => {
                    if (res.data.errcode === 0) {
                        this.$Message.success('修改信息成功')
                        this.formData = {}
                        this.modal.show = false
                        this.initList(this.param);
                    } else {
                        this.$Notice.error({
                            title: '修改信息失败',
                            desc: res.data.errmsg
                        })
                    }
                })
            } else {
                this.$Notice.error({ title: '必填信息未填写完成!', desc: '必填信息未填写完成!' })
            }
        });
      },
      deleteData (index) {
          let obj = this.data1[index];
          this.$Modal.confirm({
              title: '数据删除',
              content: '确认删除领取记录？',
              loading: true,
              onOk: () => {
                  deleteData({ id: obj.id }).then(ret => {
                      let data = ret.data
                      if (data.errcode === 0) {
                          this.initList(this.param)
                      } else {
                          this.error(data)
                      }
                      this.$Modal.remove()
                  })
              }
          })
      }
  },
    watch: {
        'formData.way': {
            handler(newVal, oldVal) {
                if (newVal == '2') {
                    this.formData.EMS_code = null
                    this.formData.EMS_address = null
                    this.ruleValidate['EMS_code'][0].required = false;
                    this.ruleValidate['EMS_address'][0].required = false;
                } else {
                    this.ruleValidate['EMS_code'][0].required = true;
                    this.ruleValidate['EMS_address'][0].required = true;
                }
            },
            immediate: true
        }
    },
  mounted () {
    this.initList(this.param)
  }
}
</script>
